<extend name="Common@Layout:layui-admin" />
<block name="title">
    <title>编辑角色</title>
</block>
<block name="style">
    <css href="/Public/jsoneditor/jsoneditor.min.css" />
    <style>
        code {
            background-color: #f5f5f5;
        }
        
        .layui-fixbar {
            display: none;
        }
        
        #jsoneditor {
            width: 700px;
            height: 500px;
            font: 10.5pt arial;
            color: #4d4d4d;
            line-height: 150%;
        }
    </style>
</block>

<block name="main">
    <div class="layui-main" style="width:auto">
        <form class="layui-form close-dialog" action="{:U('role_edit_post')}" method="post" style="margin-top:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{$info.title}" lay-verify="required" placeholder="角色标题" autocomplete="off" class="layui-input" style="width:300px;display:inline-block;">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色KEY：</label>
                <div class="layui-input-block">
                    <input type="text" name="key" value="{$info.key}" lay-verify="required" placeholder="请输入索引的Key唯一" autocomplete="off" class="layui-input" style="width:300px;display:inline-block;">
                    <a class="layui-btn" id="saveBtn" style="margin-left:30px;">保存</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置：</label>
                <div class="layui-input-block">
                    <div id="jsoneditor"></div>
                </div>
            </div>
            <input type="hidden" name="id" value="{$info.id}">
            <input type="hidden" id="jsonInput" name="json" value="{$info.json}">
        </form>
    </div>
</block>


<block name="script">
    <js href="/Public/jsoneditor/jsoneditor.min.js" />
    <script>
        var container = document.getElementById('jsoneditor');
        var options = {
            mode: 'code',
        };

        var json = <?php echo $info['json'];?>;
        //json = JSON.parse(json);
        var editor = new JSONEditor(container, options, json);

        layui.use(['jquery'], function() {
            var $ = layui.jquery;
            $('#saveBtn').click(function() {
                $('#jsonInput').val(JSON.stringify(editor.get()));
                layui.miniweb.formSubmit($('form'));
            });
        });
    </script>
</block>